<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p>格式化文本，主要用于数字、时间日期等的格式转换，不修改原来的值。新版中已经废弃</p>
        <p>￥{{price1.toFixed(2)}}</p>
        <!-- 过滤器-串联使用 -->
        <p>{{price2 | formatPrice | formatPricePro}}</p>
        <p>{{price3 | formatPrice | formatPricePro}}</p>
        <!-- 过滤器-传值 -->
        <p>{{time | formatTime('yy-mm-dd')}}</p>
        <p>{{time | formatTime('hh-mm-ss')}}</p>
    </div> 
    <script>
        Vue.filter('formatTime', (val, type)=>{
            // 第一个参数是固定的原始数据，自己传入的参数从第二个位置开始
            if(type === 'yy-mm-dd') {
                // padStart(2, 0)  字符串的补零方法
                return `${val.getFullYear()}-${val.getMonth()+1}-${val.getDate()}`
            }else if(type === 'hh-mm-ss') {
                return `${val.getHours()}:${val.getMinutes()}:${val.getSeconds()}`
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                price1: 10,
                price2: 5,
                price3: 2.5,
                time: new Date()
            },
            methods: {
                
            },
            // 过滤器--转换格式  写在vue实例里面 叫局部注册
            filters: {
                formatPrice(val) {
                    return val.toFixed(2)
                },
                formatPricePro(val) {
                    return '￥'+val
                }
            }
        })
    </script>
</body>
</html>